<template>
  <div class="culum">
    <p class="myculum">
      <span><img src="../img/ds.png" alt="" />我的课表</span>
    </p>
    <ul class="list">
      <li v-for="item in list" :key="item._id">
        <div class="toop">
          <img src="../img/tagger.png" alt="" />
          <p class="African">African Safari Animals</p>
          <p class="Animals">奇妙的草原动物</p>

          <p class="begin">
            05:26后开始上课 <van-button round type="info">进教室</van-button>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Button } from "vant";
export default {
  data() {
    return { list: null };
  },

  components: {
    "van-button": Button,
  },

  computed: {},

  mounted() {
    this.getlist();
  },

  methods: {
    getlist() {
      fetch(
        "https://www.fastmock.site/mock/1403d720fc3170df8c1fc00c0ced5ddf/api/api/list"
      )
        .then((response) => response.json()) // //第一个then可以将原始数据转换为json对象
        .then((res) => {
          console.log(res);
          this.list = res;
          //第二个then接收的才是后台传过来的真正的数据
          console.log(this.list);
        });
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.culum {
  width: 100%;
  height: 100%;
  margin: 20px 0;
  //   padding-bottom: 50px;
  padding: 0 10px 50px 10px;

  .myculum {
    font-size: 20px;
    margin: 20px 5px;
    img {
      width: 28px;
      height: 28px;
      margin: 0 8px;
    }
  }
  .list {
    width: 100%;
    height: 100%;
    li {
      width: 100%;
      height: 340px;
      border: 2px solid rgb(252, 246, 246);
      margin-bottom: 20px;
      border-radius: 5%;
      text-indent: 30px;
      position: relative;
      box-shadow: 2px -2px 5px #989898;

      .toop {
        width: 100%;
        height: 180px;
        img {
          display: block;
          //   margin-left: 30px;
          margin: auto;
          margin-top: 20px;
          border-radius: 10%;
        }
      }
      .African {
        font-size: 20px;
        margin: 10px 0;
      }
      .Animals {
        font-size: 14px;
        color: #989898;
        margin: 10px 0;
      }
      .begin {
        font-size: 14px;
        color: #3b98ff;
        border-top: 1px dashed #ccc;
        padding-top: 18px;
      }
      .van-button {
        background: #3b98ff;
        width: 80px;
        height: 30px;
        color: #fff;
        border: none;
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
  }
}
</style>
